<template>
	<view class="uni-container">
		<uni-forms ref="form" v-model="formData" :rules="rules" validateTrigger="bind" @submit="submit">
			<uni-forms-item name="username" label="用户名" required>
				<uni-easyinput v-model="formData.username" :clearable="false" placeholder="请输入用户名" />
			</uni-forms-item>
			<uni-forms-item name="nickname" label="用户昵称" required>
				<uni-easyinput v-model="formData.nickname" :clearable="false" placeholder="请输入用户昵称" />
			</uni-forms-item>
			<uni-forms-item v-if="showPassword" name="password" label="重置密码" key="password">
				<uni-easyinput v-model="formData.password" :clearable="false" placeholder="请输入重置密码">
					<view slot="right" class="cancel-reset-password-btn" @click="trigger">取消</view>
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item v-else label="重置密码">
				<span class="reset-password-btn" @click="trigger">点击重置密码</span>
			</uni-forms-item>
			<uni-forms-item name="role" label="角色列表" class="flex-center-x">
				<uni-data-checkbox multiple :localdata="roles" v-model="formData.role" @change="onRoleChange" />
				<view class="link-btn" @click="openRoleManager" style="margin-left: 10px;">管理角色</view>
			</uni-forms-item>
			
			<!-- 直接分配权限 -->
			<uni-forms-item name="permission" label="直接分配权限" class="flex-center-x">
				<uni-data-checkbox :multiple="true" v-model="formData.permission" 
					collection="uni-id-permissions" :page-size="500" 
					field="permission_name as text, permission_id as value" />
				<view class="link-btn" @click="openPermissionManager" style="margin-left: 10px;">管理权限</view>
				<view class="uni-form-item-tips">直接分配的权限会与角色权限合并</view>
			</uni-forms-item>
			
			<!-- 权限配置区域 -->
			<view class="permission-config-section">
				<uni-collapse>
					<uni-collapse-item title="权限配置">
						<view class="permission-config-content">
							<!-- 当前用户权限 -->
							<view class="permission-section">
								<view class="section-title">
									<text>当前用户权限</text>
									<button class="mini-btn" type="primary" size="mini" @click="openPermissionManager">管理权限</button>
								</view>
								<view class="permission-list">
									<uni-tag v-for="perm in userPermissions" :key="perm" type="primary" size="small" :text="perm" style="margin: 5px;"></uni-tag>
									<text v-if="userPermissions.length === 0" class="empty-text">暂无权限（请先分配角色）</text>
								</view>
							</view>
							
							<!-- 菜单权限预览 -->
							<view class="permission-section">
								<view class="section-title">
									<text>可访问菜单预览</text>
									<button class="mini-btn" type="primary" size="mini" @click="openMenuPermissionManager">配置菜单权限</button>
								</view>
								<view class="menu-tree">
									<view v-for="menu in accessibleMenus" :key="menu.menu_id" class="menu-item" :style="{paddingLeft: (menu.level * 20) + 'px'}">
										<text class="menu-icon">{{menu.icon ? menu.icon : '📁'}}</text>
										<text class="menu-name">{{menu.name}}</text>
										<text v-if="menu.url" class="menu-url">{{menu.url}}</text>
									</view>
									<text v-if="accessibleMenus.length === 0" class="empty-text">暂无可访问菜单</text>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<uni-forms-item name="authorizedApp" label="可登录应用">
				<view class="uni-forms-item-flex-center-x">
					<uni-data-checkbox :multiple="true" v-model="formData.authorizedApp" :localdata="appList"></uni-data-checkbox>
					<span class="link-btn" @click="gotoAppList">管理</span>
				</view>
				<view v-if="formDataId === userId" class="uni-form-item-tips">当前有未添加的应用{{ unknownAppidsCom }}，建议点击右侧管理进行添加</view>
			</uni-forms-item>
			<uni-forms-item name="mobile" label="手机号">
				<uni-easyinput v-model="formData.mobile" :clearable="false" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item name="email" label="邮箱">
				<uni-easyinput v-model="formData.email" :clearable="false" placeholder="请输入邮箱" />
			</uni-forms-item>
			<uni-forms-item name="status" label="用户状态">
				<switch v-if="Number(formData.status) < 2" @change="binddata('status', $event.detail.value)" :checked="formData.status" :disabled="formDataId === userId" />
				<view v-else class="uni-form-item-empty">{{parseUserStatus(formData.status)}}</view>
				<view v-if="formDataId === userId" class="uni-form-item-tips">请勿禁用当前登录的账号</view>
			</uni-forms-item>
			<view class="uni-button-group">
				<button style="width: 100px;" type="primary" class="uni-button" @click="submitForm">{{$t('common.button.submit')}}</button>
				<navigator open-type="navigateBack" style="margin-left: 15px;"><button style="width: 100px;" class="uni-button">{{$t('common.button.back')}}</button></navigator>
			</view>
		</uni-forms>
		
		<!-- 角色管理弹窗 -->
		<uni-popup ref="roleManagerPopup" type="center" :mask-click="false">
			<view class="popup-container">
				<view class="popup-header">
					<text class="popup-title">角色管理</text>
					<text class="popup-close" @click="closeRoleManager">✕</text>
				</view>
				<view class="popup-content">
					<view class="popup-section">
						<view class="section-title">创建新角色</view>
						<uni-forms ref="roleForm" :model="roleFormData" label-width="80px">
							<uni-forms-item name="role_id" label="角色ID" required>
								<uni-easyinput v-model="roleFormData.role_id" placeholder="唯一标识，不可重复" />
							</uni-forms-item>
							<uni-forms-item name="role_name" label="角色名称" required>
								<uni-easyinput v-model="roleFormData.role_name" placeholder="角色显示名称" />
							</uni-forms-item>
							<uni-forms-item name="permission" label="分配权限">
								<uni-data-checkbox :multiple="true" v-model="roleFormData.permission" 
									collection="uni-id-permissions" :page-size="500" 
									field="permission_name as text, permission_id as value" />
							</uni-forms-item>
							<uni-forms-item name="comment" label="备注">
								<uni-easyinput type="textarea" v-model="roleFormData.comment" placeholder="角色说明" />
							</uni-forms-item>
						</uni-forms>
						<view class="popup-buttons">
							<button class="uni-button" type="primary" size="mini" @click="saveRole">保存角色</button>
							<button class="uni-button" type="default" size="mini" @click="resetRoleForm">重置</button>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 权限管理弹窗 -->
		<uni-popup ref="permissionManagerPopup" type="center" :mask-click="false">
			<view class="popup-container">
				<view class="popup-header">
					<text class="popup-title">权限管理</text>
					<text class="popup-close" @click="closePermissionManager">✕</text>
				</view>
				<view class="popup-content">
					<view class="popup-section">
						<view class="section-title">创建新权限</view>
						<uni-forms ref="permissionForm" :model="permissionFormData" label-width="100px">
							<uni-forms-item name="permission_id" label="权限ID" required>
								<uni-easyinput v-model="permissionFormData.permission_id" placeholder="唯一标识，不可重复" />
							</uni-forms-item>
							<uni-forms-item name="permission_name" label="权限名称" required>
								<uni-easyinput v-model="permissionFormData.permission_name" placeholder="权限显示名称" />
							</uni-forms-item>
							<uni-forms-item name="comment" label="备注">
								<uni-easyinput type="textarea" v-model="permissionFormData.comment" placeholder="权限说明" />
							</uni-forms-item>
						</uni-forms>
						<view class="popup-buttons">
							<button class="uni-button" type="primary" size="mini" @click="savePermission">保存权限</button>
							<button class="uni-button" type="default" size="mini" @click="resetPermissionForm">重置</button>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 菜单权限配置弹窗 -->
		<uni-popup ref="menuPermissionPopup" type="center" :mask-click="false">
			<view class="popup-container popup-large">
				<view class="popup-header">
					<text class="popup-title">菜单权限配置</text>
					<text class="popup-close" @click="closeMenuPermissionManager">✕</text>
				</view>
				<view class="popup-content">
					<view class="menu-permission-list">
						<view v-for="menu in allMenus" :key="menu._id" class="menu-permission-item">
							<view class="menu-info">
								<text class="menu-name">{{menu.name}}</text>
								<text v-if="menu.url" class="menu-url">{{menu.url}}</text>
							</view>
							<view class="menu-permission-select">
								<uni-data-checkbox :multiple="true" v-model="menu.permission" 
									collection="uni-id-permissions" :page-size="500" 
									field="permission_name as text, permission_id as value" />
							</view>
						</view>
					</view>
					<view class="popup-buttons">
						<button class="uni-button" type="primary" size="mini" @click="saveMenuPermissions">保存配置</button>
						<button class="uni-button" type="default" size="mini" @click="closeMenuPermissionManager">取消</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { validator } from '@/js_sdk/validator/uni-id-users.js';

	const db = uniCloud.database();
	const dbCmd = db.command;
	const dbCollectionName = 'uni-id-users';

	function getValidator(fields) {
		let result = {}
		for (let key in validator) {
			if (fields.includes(key)) {
				result[key] = validator[key]
			}
		}
		return result
	}

		export default {
		data() {
			return {
				showPassword: false,
				formData: {
					"username": "",
					"nickname": "",
					"password": undefined,
					"role": [],
					"permission": [],
					"authorizedApp": [],
					"mobile": undefined,
					"email": undefined,
					"status": false //默认禁用
				},
				rules: {
					...getValidator(["username", "password", "role", "mobile", "email"]),
					"status": {
						"rules": [{
							"format": "bool"
						}]
					}
				},
				roles: [],
				userId:"",
				appList:[],
				unknownAppids:[],
				// 权限配置相关
				roleFormData: {
					role_id: "",
					role_name: "",
					permission: [],
					comment: ""
				},
				permissionFormData: {
					permission_id: "",
					permission_name: "",
					comment: ""
				},
				allMenus: [],
				allRoles: [],
				allPermissions: []
			}
		},
		onLoad(e) {
			const id = e.id
			this.formDataId = id
			let userInfo = uni.getStorageSync("uni-id-pages-userInfo") || {};
			this.userId = userInfo._id;
			this.getDetail(id)
			this.loadroles();
			this.loadAllMenus();
			this.loadAllRoles();
			this.loadAllPermissions();
		},
		methods: {
			/**
			 * 跳转应用管理的 list 页
			 */
			gotoAppList() {
				uni.navigateTo({
					url: '../app/list'
				})
			},
			/**
			 * 切换重置密码框显示或隐藏
			 */
			trigger() {
				this.showPassword = !this.showPassword
			},

			/**
			 * 触发表单提交
			 */
			submitForm(form) {
				this.$refs.form.submit();
			},

			/**
			 * 表单提交
			 * @param {Object} event 回调参数 Function(callback:{value,errors})
			 */
			submit(event) {
				const {
					value,
					errors
				} = event.detail
				// 表单校验失败页面会提示报错 ，要停止表单提交逻辑
				if (errors) {
					return
				}
				uni.showLoading({
					title: '修改中...',
					mask: true
				})

				// 是否启用功能的数据类型转换， 0 正常， 1 禁用
				if (typeof value.status === "boolean") {
					value.status = Number(!value.status)
				}
				value.uid = this.formDataId

				this.$request('updateUser', value).then(() => {
					uni.showToast({
						title: '修改成功'
					})
					const eventChannel = this.getOpenerEventChannel();
					if (eventChannel.emit) eventChannel.emit('refreshData');
					setTimeout(() => uni.navigateBack(), 500)
				}).catch(err => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(err => {
					uni.hideLoading()
				})
			},

			resetPWd(resetData) {
				this.$request('system/user/resetPwd', resetData)
					.then().catch(err => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
					}).finally()
			},
			/**
			 * 获取表单数据
			 * @param {Object} id
			 */
			getDetail(id) {
				uni.showLoading({
					mask: true
				})
				db.collection(dbCollectionName)
					.doc(id)
					.field('username,nickname,role,permission,dcloud_appid as authorizedApp,mobile,email,status')
					.get()
					.then((res) => {
						const data = res.result.data[0]
						if (data) {
							if (data.status === undefined) {
								data.status = true
							}
							if (data.status === 0) {
								data.status = true
							}
							if (data.status === 1) {
								data.status = false
							}
							this.formData = Object.assign(this.formData, data);
							this.loadAppList(this.formData.authorizedApp);
						}
					}).catch((err) => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
					}).finally(() => {
						uni.hideLoading()
					})
			},
			loadroles() {
				db.collection('uni-id-roles').limit(500).get().then(res => {
					const roleIds = []
					this.roles = res.result.data.map(item => {
						roleIds.push(item.role_id)
						return {
							value: item.role_id,
							text: item.role_name
						}
					})
					if (roleIds.indexOf('admin') === -1) {
						this.roles.unshift({
							value: 'admin',
							text: '超级管理员'
						})
					}
				}).catch(err => {
					uni.showModal({
						title: '提示',
						content: err.message,
						showCancel: false
					})
				})
			},
			// 加载所有角色（包含权限信息）
			loadAllRoles() {
				db.collection('uni-id-roles').limit(500).get().then(res => {
					this.allRoles = res.result.data;
					// 添加admin角色
					if (!this.allRoles.find(r => r.role_id === 'admin')) {
						this.allRoles.unshift({
							role_id: 'admin',
							role_name: '超级管理员',
							permission: []
						});
					}
				}).catch(err => {
					console.error('加载角色失败:', err);
				});
			},
			// 加载所有权限
			loadAllPermissions() {
				db.collection('uni-id-permissions').limit(500).get().then(res => {
					this.allPermissions = res.result.data;
				}).catch(err => {
					console.error('加载权限失败:', err);
				});
			},
			// 加载所有菜单
			loadAllMenus() {
				return db.collection('opendb-admin-menus').limit(500).get().then(res => {
					// 确保permission字段是数组，并且是响应式的
					this.allMenus = res.result.data.map(menu => {
						const permission = menu.permission || [];
						// 确保permission是数组格式
						const permissionArray = Array.isArray(permission) ? permission : [];
						// 如果是对象数组，提取permission_id
						const permissionIds = permissionArray.map(p => {
							if (typeof p === 'string') return p;
							if (p && p.permission_id) return p.permission_id;
							return p;
						});
						return {
							...menu,
							permission: permissionIds
						};
					});
				}).catch(err => {
					console.error('加载菜单失败:', err);
					return Promise.reject(err);
				});
			},
			// 角色变化时触发
			onRoleChange() {
				// 权限会自动通过computed计算更新
			},
			// 打开角色管理弹窗
			openRoleManager() {
				this.$refs.roleManagerPopup.open();
			},
			// 关闭角色管理弹窗
			closeRoleManager() {
				this.$refs.roleManagerPopup.close();
			},
			// 保存角色
			saveRole() {
				if (!this.roleFormData.role_id || !this.roleFormData.role_name) {
					uni.showToast({
						title: '请填写角色ID和名称',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({ mask: true });
				db.collection('uni-id-roles').add(this.roleFormData).then(res => {
					uni.showToast({
						title: '创建成功'
					});
					this.resetRoleForm();
					this.loadroles();
					this.loadAllRoles();
					this.closeRoleManager();
				}).catch(err => {
					uni.showModal({
						title: '提示',
						content: err.message || '创建失败',
						showCancel: false
					});
				}).finally(() => {
					uni.hideLoading();
				});
			},
			// 重置角色表单
			resetRoleForm() {
				this.roleFormData = {
					role_id: "",
					role_name: "",
					permission: [],
					comment: ""
				};
			},
			// 打开权限管理弹窗
			openPermissionManager() {
				this.$refs.permissionManagerPopup.open();
			},
			// 关闭权限管理弹窗
			closePermissionManager() {
				this.$refs.permissionManagerPopup.close();
			},
			// 保存权限
			savePermission() {
				if (!this.permissionFormData.permission_id || !this.permissionFormData.permission_name) {
					uni.showToast({
						title: '请填写权限ID和名称',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({ mask: true });
				db.collection('uni-id-permissions').add(this.permissionFormData).then(res => {
					uni.showToast({
						title: '创建成功'
					});
					this.resetPermissionForm();
					this.loadAllPermissions();
					this.closePermissionManager();
				}).catch(err => {
					uni.showModal({
						title: '提示',
						content: err.message || '创建失败',
						showCancel: false
					});
				}).finally(() => {
					uni.hideLoading();
				});
			},
			// 重置权限表单
			resetPermissionForm() {
				this.permissionFormData = {
					permission_id: "",
					permission_name: "",
					comment: ""
				};
			},
			// 打开菜单权限配置弹窗
			openMenuPermissionManager() {
				// 确保菜单数据是最新的
				this.loadAllMenus().then(() => {
					this.$refs.menuPermissionPopup.open();
				});
			},
			// 关闭菜单权限配置弹窗
			closeMenuPermissionManager() {
				this.$refs.menuPermissionPopup.close();
			},
			// 保存菜单权限配置
			saveMenuPermissions() {
				uni.showLoading({ mask: true });
				const updatePromises = this.allMenus.map(menu => {
					return db.collection('opendb-admin-menus').doc(menu._id).update({
						permission: menu.permission || []
					});
				});
				Promise.all(updatePromises).then(() => {
					uni.showToast({
						title: '保存成功'
					});
					this.loadAllMenus();
					this.closeMenuPermissionManager();
				}).catch(err => {
					uni.showModal({
						title: '提示',
						content: err.message || '保存失败',
						showCancel: false
					});
				}).finally(() => {
					uni.hideLoading();
				});
			},
			// 添加父菜单到可访问列表
			addParentMenus(parentId, menuIdSet) {
				if (!parentId) return;
				const parentMenu = this.allMenus.find(m => m.menu_id === parentId);
				if (parentMenu && !menuIdSet.has(parentId)) {
					menuIdSet.add(parentId);
					if (parentMenu.parent_id) {
						this.addParentMenus(parentMenu.parent_id, menuIdSet);
					}
				}
			},
			// 构建菜单树（添加层级信息）
			buildMenuTree(menus) {
				const menuMap = new Map();
				const rootMenus = [];
				
				// 创建菜单映射
				menus.forEach(menu => {
					menuMap.set(menu.menu_id, { ...menu, level: 0, children: [] });
				});
				
				// 构建树结构
				menus.forEach(menu => {
					const menuNode = menuMap.get(menu.menu_id);
					if (menu.parent_id) {
						const parent = menuMap.get(menu.parent_id);
						if (parent) {
							parent.children.push(menuNode);
							menuNode.level = parent.level + 1;
						} else {
							rootMenus.push(menuNode);
						}
					} else {
						rootMenus.push(menuNode);
					}
				});
				
				// 扁平化输出（按层级排序）
				const result = [];
				const flatten = (nodes) => {
					nodes.forEach(node => {
						result.push(node);
						if (node.children && node.children.length > 0) {
							flatten(node.children);
						}
					});
				};
				flatten(rootMenus);
				return result;
			},
			loadAppList(authorizedApp){
				db.collection('opendb-app-list').limit(500).get().then(res => {
					let list = res.result.data.map((item, index) => {
						return {
							value: item.appid,
							text: item.name
						}
					});
					if (!list) list = [];
					authorizedApp.map((appid) => {
						let info = list.find((item) => {
							return item.value === appid;
						});
						if (!info) {
							this.unknownAppids.push(appid);
							list.push({
								value: appid,
								text: `未知应用${appid}`
							});
						}
					});
					this.appList = list;
				}).catch(err => {
					uni.showModal({
						title: '提示',
						content: err.message,
						showCancel: false
					})
				})
			},
			// status 对应文字显示
			parseUserStatus(status) {
				if (status === 0) {
					return '启用'
				} else if (status === 1) {
					return '禁用'
				} else if (status === 2) {
					return '审核中'
				} else if (status === 3) {
					return '审核拒绝'
				} else if (status === 4) {
					return '已注销'
				} else if (typeof status !== "undefined") {
					return '未知'
				} else {
					return '启用'
				}
			}
		},
		computed:{
			unknownAppidsCom(){
				let str = "";
				this.unknownAppids.map((item, index) => {
					str += item;
					if (index !== this.unknownAppids.length-1){
						str += "、";
					}
				});
				return str;
			},
			// 计算用户权限（基于角色和直接分配的权限）
			userPermissions() {
				const permissionSet = new Set();
				
				// 如果是admin角色，返回所有权限
				if (this.formData.role && this.formData.role.indexOf('admin') > -1) {
					return this.allPermissions.map(p => p.permission_id);
				}
				
				// 收集所有角色的权限
				if (this.formData.role && this.formData.role.length > 0) {
					this.formData.role.forEach(roleId => {
						const role = this.allRoles.find(r => r.role_id === roleId);
						if (role && role.permission) {
							role.permission.forEach(perm => {
								if (typeof perm === 'string') {
									permissionSet.add(perm);
								} else if (perm.permission_id) {
									permissionSet.add(perm.permission_id);
								}
							});
						}
					});
				}
				
				// 合并直接分配的权限
				if (this.formData.permission && this.formData.permission.length > 0) {
					this.formData.permission.forEach(perm => {
						if (typeof perm === 'string') {
							permissionSet.add(perm);
						} else if (perm.permission_id) {
							permissionSet.add(perm.permission_id);
						}
					});
				}
				
				return Array.from(permissionSet);
			},
			// 计算可访问菜单
			accessibleMenus() {
				if (this.userPermissions.length === 0) {
					return [];
				}
				// 如果是admin，返回所有启用的菜单
				if (this.formData.role && this.formData.role.indexOf('admin') > -1) {
					return this.buildMenuTree(this.allMenus.filter(m => m.enable !== false));
				}
				// 根据权限过滤菜单
				const accessibleMenuIds = new Set();
				this.allMenus.forEach(menu => {
					if (menu.enable === false) return;
					// 如果是叶子节点（有url），需要检查权限
					if (menu.url && menu.permission && menu.permission.length > 0) {
						const hasPermission = menu.permission.some(perm => {
							const permId = typeof perm === 'string' ? perm : perm.permission_id || perm;
							return this.userPermissions.indexOf(permId) > -1;
						});
						if (hasPermission) {
							accessibleMenuIds.add(menu.menu_id);
							// 添加所有父菜单
							this.addParentMenus(menu.parent_id, accessibleMenuIds);
						}
					} else if (!menu.url) {
						// 非叶子节点，如果有子菜单可访问，则显示
						const hasAccessibleChild = this.allMenus.some(m => 
							m.parent_id === menu.menu_id && accessibleMenuIds.has(m.menu_id)
						);
						if (hasAccessibleChild) {
							accessibleMenuIds.add(menu.menu_id);
							this.addParentMenus(menu.parent_id, accessibleMenuIds);
						}
					}
				});
				const accessibleMenus = this.allMenus.filter(m => accessibleMenuIds.has(m.menu_id));
				return this.buildMenuTree(accessibleMenus);
			}
		}
	}
</script>

<style>
	.reset-password-btn {
		/* height: 100%; */
		line-height: 36px;
		color: #007AFF;
		text-decoration: underline;
		cursor: pointer;
	}

	.cancel-reset-password-btn {
		color: #007AFF;
		padding-right: 10px;
		cursor: pointer;
	}
	::v-deep .uni-forms-item__label {
		width: 90px !important;
	}

	.uni-forms-item-flex-center-x {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.link-btn {
		color: #007AFF;
		cursor: pointer;
		text-decoration: underline;
		font-size: 12px;
	}
	
	/* 权限配置区域样式 */
	.permission-config-section {
		margin: 20px 0;
		border: 1px solid #e4e7ed;
		border-radius: 4px;
		background-color: #fafafa;
	}
	
	.permission-config-content {
		padding: 15px;
	}
	
	.permission-section {
		margin-bottom: 20px;
	}
	
	.permission-section:last-child {
		margin-bottom: 0;
	}
	
	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		font-weight: bold;
		font-size: 14px;
	}
	
	.mini-btn {
		margin-left: 10px;
	}
	
	.permission-list {
		min-height: 40px;
		padding: 10px;
		background-color: #fff;
		border-radius: 4px;
		border: 1px solid #e4e7ed;
	}
	
	.empty-text {
		color: #909399;
		font-size: 12px;
	}
	
	.uni-form-item-tips {
		font-size: 12px;
		color: #909399;
		margin-top: 5px;
	}
	
	.menu-tree {
		min-height: 40px;
		max-height: 300px;
		overflow-y: auto;
		padding: 10px;
		background-color: #fff;
		border-radius: 4px;
		border: 1px solid #e4e7ed;
	}
	
	.menu-item {
		display: flex;
		align-items: center;
		padding: 5px 0;
		font-size: 13px;
	}
	
	.menu-icon {
		margin-right: 8px;
	}
	
	.menu-name {
		font-weight: 500;
		margin-right: 10px;
	}
	
	.menu-url {
		color: #909399;
		font-size: 12px;
	}
	
	/* 弹窗样式 */
	.popup-container {
		width: 600px;
		max-width: 90vw;
		max-height: 80vh;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	
	.popup-large {
		width: 800px;
		max-width: 95vw;
	}
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 20px;
		border-bottom: 1px solid #e4e7ed;
		background-color: #f5f7fa;
	}
	
	.popup-title {
		font-size: 16px;
		font-weight: bold;
		color: #303133;
	}
	
	.popup-close {
		font-size: 20px;
		color: #909399;
		cursor: pointer;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.popup-close:hover {
		color: #303133;
	}
	
	.popup-content {
		flex: 1;
		overflow-y: auto;
		padding: 20px;
	}
	
	.popup-section {
		margin-bottom: 20px;
	}
	
	.popup-buttons {
		display: flex;
		justify-content: flex-end;
		gap: 10px;
		margin-top: 20px;
		padding-top: 15px;
		border-top: 1px solid #e4e7ed;
	}
	
	.menu-permission-list {
		max-height: 400px;
		overflow-y: auto;
	}
	
	.menu-permission-item {
		padding: 15px;
		margin-bottom: 15px;
		border: 1px solid #e4e7ed;
		border-radius: 4px;
		background-color: #fafafa;
	}
	
	.menu-info {
		margin-bottom: 10px;
	}
	
	.menu-info .menu-name {
		font-weight: bold;
		font-size: 14px;
		color: #303133;
		display: block;
		margin-bottom: 5px;
	}
	
	.menu-info .menu-url {
		font-size: 12px;
		color: #909399;
	}
	
	.menu-permission-select {
		margin-top: 10px;
	}
</style>
